<template>
  <view class="box">
    <view
      :style="{ 'border-bottom': '1rpx solid rgba(255, 255, 255, 0.3)' }"
      v-for="(item, index) in list"
      :key="index"
    >
      <view class="box_item" @click="goDetail(item)">
        <view
          class="item_top"
          :style="{ 'margin-bottom': item.user ? '32rpx' : '0' }"
        >
          <view class="top_img" v-if="item.user">
            <image
              :src="item.user.avatar_url"
              @click.stop="goHome(item.user.user_id)"
            ></image>
          </view>
          <view class="top_name" v-if="item.user">
            <view class="name">{{ item.user.nick_name }}</view>
            <view class="time">{{ item.create_time }}</view>
          </view>
          <view class="del_btn" v-if="isShow && type">
            <u-icon
              size="25"
              name="trash"
              color="#ADADAD"
              v-if="isBack"
              @click="deleteFn(item)"
            ></u-icon>
            <text class="back_text" v-else>回复</text>
          </view>
        </view>
        <view class="item_text" v-if="isShow">{{ item.content }}</view>
        <view class="item_text" v-if="isZan && item.id == 1">赞了这条内容</view>
        <view class="item_img" v-if="item.file">
          <image
            :src="imgItem.file_type == 10 ? imgItem.url : imgItem.url_img"
            v-for="(imgItem, ind) in item.file"
            :key="ind"
            @click.stop="goPreview(imgItem, item.file)"
          ></image>
        </view>
        <view
          class="item_bottom_title"
          v-if="item.comment_id && item.comment_user"
          >{{ item.comment_user.nick_name }}：{{ item.comment_content }}</view
        >
        <view class="item_bottom">
          <view class="bottom_img" v-if="item.common_file || item.img_url">
            <image :src="item.common_file || item.img_url"></image>
          </view>
          <view class="bottom_text" v-html="item.content_g || item.title">
            <!-- {{ item.content_g || item.title }} -->
          </view>
        </view>
        <!-- <view class="item_bottom_yin">[音频]</view> -->
      </view>
    </view>
    <view class="empty_view" v-if="list && list.length == 0">
      <image
        class="item_left_clickable"
        src="../static/images/my/kong.png"
        mode=""
      ></image>
      <view>当前暂无评论~</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
    isBack: {
      type: Boolean,
      default: true,
    },
    list: {
      type: Array,
      default: () => [],
    },
    isZan: {
      type: Boolean,
      default: false,
    },
    displayMode: {
      type: Boolean,
      default: false,
    },
  },
  onLoad(options) {
    this.type = options.type;
  },
  data() {
    return {
      type: "",
    };
  },
  methods: {
    deleteFn(item) {
      // console.log(item);
      this.$http
        .userDelete_comment({ id: item.id })
        .then((res) => {
          uni.$u.toast(res.message);
          setTimeout(() => {
            this.$emit("update", 1);
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    goPreview(item, file) {
      // console.log(item);
      if (item.file_type == 10) {
        
        let str = [];
        for (let i = 0; i < file.length; i++) {
          if (file[i].file_type == 10) {
            str.push(file[i].url);
          }
        }

        uni.previewImage({
          urls: str,
          current: item.url,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {
              // console.log(
              //   "选中了第" +
              //     (data.tapIndex + 1) +
              //     "个按钮,第" +
              //     (data.index + 1) +
              //     "张图片"
              // );
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      }
    },
    // 跳个人主页
    goHome(user_id) {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${user_id}`,
      });
    },
    // 跳对应详情
    goDetail(item) {
      if (item.module_id == 1) {
        // 飞离洞
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=fei&currentId=${item.association_id}&from=wei`,
        });
      } else if (item.module_id == 2) {
        // 灵感塔
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=ling&currentId=${item.association_id}&from=wei`,
        });
      } else if (item.module_id == 3) {
        // 诗心园
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=shi&currentId=${item.association_id}&from=wei`,
        });
      } else if (item.module_id == 4) {
        // 文心岛
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=wen&currentId=${item.association_id}&from=wei`,
        });
      } else if (item.module_id == 5) {
        // 星河
        uni.navigateTo({
          url: `/pages/distinguish/detail?id=${item.association_id2}&xinghe_id=${item.association_id}`,
        });
      } else if (item.module_id == 6) {
        // 游记
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=youji&currentId=${item.association_id}&from=wei`,
        });
      } else if (item.module_id == 7) {
        // 共创
        uni.navigateTo({
          url: `/pages/detail/coCreateFly?id=${item.association_id}`,
        });
      } else if (item.module_id == 8) {
        // 人物志
      } else if (item.module_id == 9) {
        // 奥义堂
        uni.navigateTo({
          url: `/pages/bigResult/myResult_it?id=${item.association_id}&type=1`,
        });
      } else if (item.module_id == 10) {
        // 大成之道
        uni.navigateTo({
          url: `/pages/training/detail?id=${item.association_id}&type=2`,
        });
      } else if (item.module_id == 11) {
        // 导航仪
        uni.navigateTo({
          url: `/pages/stargate/maps?id=${item.association_id}`,
        });
      } else if (item.module_id == 12) {
        // 图书
        uni.navigateTo({
          url: `/pages/book/detail?id=${item.association_id}`,
        });
      } else if (item.module_id == 13) {
        // 训练营
        uni.navigateTo({
          url: `/pages/training/clockDetail?id=${item.association_id}`,
        });
      } else if (item.module_id == 14) {
        // 家乡
        uni.navigateTo({
          url: `/pages/detail/flyDetail?type=bingshiyin&detailType=myjiaxiang&currentId=${item.association_id}`,
        });
      } else if (item.module_id == 15) {
        // 家族
        uni.navigateTo({
          url: `/pages/detail/flyDetail?type=bingshiyin&detailType=myjiazu&currentId=${item.association_id}`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 40rpx 0;
  .box_item {
    padding: 40rpx 30rpx;
    // border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

    .item_top {
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 32rpx;
      .top_img {
        width: 100rpx;
        border-radius: 50%;
        height: 100rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }

      .top_name {
        margin-left: 24rpx;
        flex: 1;

        .name {
          font-size: 32rpx;
          color: #eeeeee;
        }

        .time {
          color: #adadad;
          font-size: 26rpx;
          margin-top: 4rpx;
        }
      }

      .del_btn {
        position: absolute;
        right: 0;
        top: 31rpx;
        .back_text {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #55b877;
        }
      }
    }

    .item_text {
      // margin-top: 32rpx;
      color: #eeeeee;
      font-size: 28rpx;
      margin-bottom: 24rpx;
    }

    .item_img {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 24rpx;

      image {
        width: 222rpx;
        height: 222rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
      }

      image:nth-child(3n) {
        margin-right: 0;
      }
    }
    .item_bottom_title {
      padding: 24rpx 24rpx 0;
      color: #eeeeee;
      font-size: 26rpx;
      background: rgba(39, 39, 39, 0.5);
    }
    .item_bottom {
      background: rgba(39, 39, 39, 0.5);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      display: flex;
      align-items: center;
      padding: 24rpx;
      // margin-top: 24rpx;

      .bottom_img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 8rpx;
        margin-right: 24rpx;

        image {
          width: 96rpx;
          height: 96rpx;
          border-radius: 8rpx;
        }
      }

      .bottom_text {
        font-size: 28rpx;
        color: #adadad;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
    }
    .item_bottom_yin {
      font-size: 28rpx;
      color: #adadad;
      background: rgba(39, 39, 39, 0.5);
      padding: 0 24rpx 24rpx;
    }
  }
  .empty_view {
    margin-top: 100rpx;
    image {
      margin: 0 auto;
      width: 410rpx;
      height: 410rpx;
    }
    view {
      font-size: 30rpx;
      color: #d8d8d8;
      text-align: center;
    }
  }
}
</style>